<template>
  <el-statistic :group-separator="data.delimiter" :precision="data.accuracy">
    <template slot="title">
      <div class="s-title">
        <span>{{ data.name }}</span>
      </div>
    </template>
    <template slot="formatter">
      <div class="sc" v-for="(item, index) in data.panelTags" :key="index">
        <span class="title">{{ item.name }}</span>
        <span class="v_total"> {{ item.t }}</span>
        <div :class="getTotalStyle(item)">
          <i :class="getIconStyle(item)" />
          <p>{{ removeMinus(item.v) }} </p>
        </div>
      </div>
    </template>
  </el-statistic>
</template>

<script>
export default {
  name: 's-card',
  props: ['panelData'],
  data() {
    return {
      data: {},
      totalClazz: 'v_var',
      totalIcon: 'el-icon-top',
    }
  },
  created: function () {
    this.data = this.panelData
  },
  watch: {
    panelData(n, _o) {
      this.$nextTick(() => {
        this.data = n
      });
    }
  },
  methods: {
    // 获取动态样式
    getTotalStyle(param) {
      let totalClazz = "v_var"
      if (param.v >= 0) {
        totalClazz = 'v_var var_1'
        this.totalIcon = 'el-icon-top'
      } else if (param.v < 0) {
        totalClazz = 'v_var var_2'
        this.totalIcon = 'el-icon-bottom'
      }
      return totalClazz;
    },
    // 获取动态样式
    getIconStyle(param) {
      let totalIcon = "el-icon-top"
      if (param.v >= 0) {
        totalIcon = 'el-icon-top'
      } else if (param.v < 0) {
        totalIcon = 'el-icon-bottom'
      }
      return totalIcon;
    },
    // 移除(+ -)
    removeMinus(param) {
      return String(param).replace(/-/g, '');
    }
  }
}
</script>

<style scoped>
.el-statistic {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  padding-top: 20px;


}

::v-deep .number {
  width: 100% !important;
}

.s-title {
  text-align: center;
  color: #2a7fcb;
  padding: 10px;

  span {
    font-family: cursive;
    font-size: x-large;
    font-weight: 800;
  }
}


.sc {
  display: flex;
  justify-content: space-between;
  align-items: center;

  width: 100%;

  span {
    font-family: cursive;
    font-size: large;
    font-weight: 600;
  }

  .title {
    text-align: center;
    padding: 10px;
    color: #2a7fcb;
    width: 100px;

    span {
      font-family: cursive;
      font-size: x-large;
      font-weight: 800;
    }
  }

  div {
    display: flex;
    justify-content: center;
    margin: 0px 10px;
  }

  .v_total {
    font-weight: 600;
    color: rgb(0, 162, 255);
    font-size: xx-large;
  }

  .v_var {
    display: flex;
    justify-content: start;
    align-items: center;
    font-size: medium;
    font-weight: 300;
    width: 100px;

    i {
      padding: 0 0 0 30px;
    }
  }

  .var_0 {
    color: rgb(158, 158, 158);
  }

  .var_1 {
    color: #009e42;
    font-weight: bold;

  }

  .var_2 {
    color: #d8303e;
    font-weight: 600;
  }
}
</style>
